﻿@page "/splitter/code-editor-layout"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example demonstrates the Splitter component that is used to design code editor-like application using multiple panes. You can resize its panes vertically as well as horizontally.</p>
</SampleDescription>
<ActionDescription>
   <p>The Splitter is used to design code editor-like application using multiple panes. In this code editor layout, display HTML, CSS, and JavaScript (JS) code as horizontal panes at the top and output of sample at the bottom pane.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <div id="target">
            <SfSplitter Height="400px" Orientation="Orientation.Vertical">
                <SplitterPanes>
                    <SplitterPane Size="53%" Min="30%">
                        <SfSplitter Height="100%" Width="100%">
                            <SplitterPanes>
                                <SplitterPane Size="29%" Min="23%">
                                    <ContentTemplate>
                                        <div>
                                            <div class="code-editor-content">
                                                <h3 class="h3">HTML</h3>
                                                <div class="code-preview">
                                                    &lt;<span>!DOCTYPE html></span>
                                                    <div>&lt;<span>html></span></div>
                                                    <div>&lt;<span>body></span></div>
                                                    &lt;<span>div</span> id="custom-image">
                                                    <div style="margin-left: 5px">&lt;<span>img</span> src="src/albert.png"></div>
                                                    <div>&lt;<span>div</span>&gt;</div>
                                                    <div>&lt;<span>/body></span></div>
                                                    <div>&lt;<span>/html></span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </ContentTemplate>
                                </SplitterPane>
                                <SplitterPane Size="20%" Min="15%">
                                    <ContentTemplate>
                                        <div>
                                            <div class="code-editor-content">
                                                <h3 class="h3">CSS</h3>
                                                <div class="code-preview">
                                                    <span>img {</span>
                                                    <div id="code-text">margin:<span>0 auto;</span></div>
                                                    <div id="code-text">display:<span>flex;</span></div>
                                                    <div id="code-text">height:<span>70px;</span></div>
                                                    <span>   }</span>
                                                </div>
                                            </div>
                                        </div>
                                    </ContentTemplate>
                                </SplitterPane>
                                <SplitterPane Size="35%" Min="35%">
                                    <ContentTemplate>
                                        <div>
                                            <div class="code-editor-content">
                                                <h3 class="h3">JavaScript</h3>
                                                <div class="code-preview">
                                                    <span>var</span> image = document.getElementById("custom-image");
                                                    <div>image.addEventListener("click", function() {</div>
                                                    <div style="padding-left: 20px;">// Code block for click action</div>
                                                    <span> }</span>
                                                </div>
                                            </div>
                                        </div>
                                    </ContentTemplate>
                                </SplitterPane>
                            </SplitterPanes>
                        </SfSplitter>
                    </SplitterPane>
                    <SplitterPane Size="53%" Min="30%">
                        <ContentTemplate>
                            <div>
                                <div class="code-editor-content">
                                    <h3 class="h3">Preview of sample</h3>
                                    <div class="splitter-image">
                                        <img class="img1" src="images/splitter/albert.png" style="width: 20%;margin: 0 auto;">
                                    </div>
                                </div>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </div>
    </div>
</div>

<style>
    #code-text {
        margin-left: 5px;
    }

    #target {
        margin: 20px auto;
        max-width: 600px;
    }

    .code-preview {
        margin-top: 15px;
        font-size: 12px;
        padding: 6px;
    }

    .control-section {
        min-height: 370px;
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .h3 {
        font-size: 14px;
        margin: 4px;
        padding: 5px;
    }

    .code-editor-content {
        padding: 12px;
    }

    .splitter-image {
        margin: 0 auto;
        display: flex;
        height: 115px;
        margin-top: 10px;
    }
</style>